<style scoped lang="scss">
@import "@/assets/css/index";
.fans {
  @include pageBottom();
  .bar_nav {
    position: fixed;
    top: 18px;
    left: 20px;
    z-index: 2;
  }
  padding-top: 36px;
  .fans-data-box {
    background-color: white;
    .data-title {
      font-size: 1.6rem;
      font-weight: bold;
    }
    .fans-info {
      display: flex;
      align-items: center;
      margin-top: 1.6rem;
      .box-item {
        flex: 1;
        // margin-top: 1.8rem;
        .cap-title {
          color: $color-subtitle;
          font-size: 1.4rem;
        }
        .num {
          margin-top: 0.8rem;
          font-size: 1.5rem;
          font-weight: bold;
        }
      }
    }
  }

  .list {
    padding-bottom: 1rem;
    .item {
      margin-top: 1rem;
      // margin-left: 1rem;
      // margin-right: 1rem;
      padding: 1rem;
      background-color: white;
      .flex1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #999;
      }
      .flex2 {
        display: flex;
        .flex2-left {
          flex: 0 0 10rem;
          width: 10rem;
          height: 7.5rem;
          border-radius: 0.6rem;
          img {
            border-radius: 0.6rem;
            object-fit: cover;
          }
        }

        .flex2-right {
          .title {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; /* 设置行数 */
            -webkit-box-orient: vertical;
            color: $color-subtitle;
            line-height: 1.2em;
          }
          .desc {
            span {
              color: #999;
            }
          }
        }
      }
      .flex3 {
        display: flex;
        justify-content: flex-end;
        .btn {
          margin-left: 1rem;
        }
      }
    }
  }
  .show {
    height: auto;
    background-color: white;
    position: relative;
    margin-bottom: 58px;
    .close-icon {
      position: absolute;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    .posterHtml {
      // display: flex;
      #coverImg {
        display: flex;
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
      }
      .imgBox {
        width: 100%;
      }
      .content {
        padding: 1.2rem;
        display: flex;
        height: 14rem;
        justify-content: space-between;
        .desc {
          word-wrap: break-word;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          .line1 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
          }
          .line2 {
            font-size: 2.2rem;
            font-weight: 900;
            color: #111;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp:2; /* 设置行数 */
            // -webkit-box-orient:vertical;
          }
        }
      }
      .bottom-box {
        padding-bottom: 2rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
    }
  }
  .imgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba($color: #000000, $alpha: 0.98);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px;
    z-index: 3000;
    img {
      width: 100%;
    }
    .tips {
      color: white;
    }
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
    }
  }
  .fix-bottom {
    box-sizing: border-box;
    // padding-bottom: 2rem;
  }
}
</style>
<template>
  <div class="fans padding-all-l">
    <div class="bar_nav"><BarNav></BarNav></div>
    <van-pull-refresh v-model="loadingRefresh" @refresh="refreshEvent">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="100"
        @load="getStaffItemall"
      >
        <div class="list" >
          <div class="item" v-for="item in activityList" :key="item.id">
            <div class="flex1">
              <span>{{ item.createtime }}</span>
              <span
                :style="{ color: $store.getters.getMasterColor }"
                v-if="item.status != 2"
                >倒计时{{ item.leaveDay }}天</span
              >
              <span v-else>已结束</span>
            </div>
            <div class="flex2 margT-l">
              <div class="flex2-left" @click="toShowView(item)">
                <img :src="item.cover" />
              </div>
              <div class="flex2-right margL-l">
                <div
                  class="title fs-14 t-bold"
                  :style="{ color: item.status == 2 ? '#999' : '#333' }"
                >
                  {{ item.title }}
                </div>
                <div class="desc margT-l">
                  <span>浏览 {{ item.browse_num }}</span
                  ><span class="margL-l">参与 {{ item.join_num }}</span>
                </div>
              </div>
            </div>
            <div class="flex3">
              <div class="btn">
                <van-button
                  plain
                  type="default"
                  size="small"
                  @click="showPopBtn(item)"
                  >分享</van-button
                >
              </div>
              <div class="btn">
                <van-button
                  plain
                  :type="item.status == 2 ? 'default' : 'danger'"
                  size="small"
                  @click="toApplyListView(item)"
                  >数据</van-button
                >
              </div>
              <!-- <div class="btn"><van-button round icon="ellipsis" type="default" size="small" @click="showActionBtn(item)"></van-button></div> -->
            </div>
          </div>
          <div v-if="activityList.length > 0">
            <div
              class="load-more color-l padding-all-m margB-l margT-l"
              v-if="finished == false"
              @click="getStaffItemall"
            >
              加载更多
            </div>
            <!-- <div class="no-data color-l padding-all-m margT-l" v-else>
              已经到底了
            </div> -->
          </div>
        </div>
      </van-list>
    </van-pull-refresh>

    <van-popup v-model="showPop" position="bottom" round>
      <div class="show">
          <span class="close-icon" :style="{backgroundColor:'#ff0004'}" @click="showPop = false"><van-icon color="white" name="cross" /></span>
          <!-- 海报html元素 -->
          <!-- <div id="posterHtml" :style="{backgroundImage: 'url('+thisItem.cover+')'}" v-show="false"> -->
          <div id="posterHtml" class="posterHtml">
            <img id="coverImg" :src="copyimg">
            <!-- <div id="imgBox"></div> -->
            <div class="content">
              <div class="desc">
                <div class="line1"><span>快来参加</span> <van-icon class="margL-m" name="fire" color="red"/></div>
                <div class="line2">{{thisItem.title}}</div>
              </div>
              <!-- 二维码 -->
              <!-- <div class="qrcode" id="qrcode" ref="qrcode"></div> -->
              <canvas class="qrcode" id="qrCode-canvas"></canvas>
            </div>
            <div class="margT-l bottom-box">
              <div class="fs-16 t-bold">{{thisItem.merchantname}}</div>
              <div class="color-m margT-m">本次活动{{thisItem.end_time}}结束</div>
            </div>
          </div>
          <div class="fix-bottom padding-lr">
            <van-button :color="$store.getters.getMasterColor" block @click="createPoster" :loading="createLoading">生成海报</van-button>
          </div>
      </div>
    </van-popup>
    <div class="imgBox" v-if="showImgPop">
		<span class="close-icon" :style="{backgroundColor:'#ff0004'}" @click="showImgPop=false;showPop=false"><van-icon color="white" name="cross" /></span>
      <img :src="createImg">
      <div class="tips margT-m fs-16">Tips:长按以上海报即可保存或转发</div>
      <!-- <span class="close-icon" color="#ff0004" @click="showImgPop = false;showPop=false"><van-icon color="white" name="cross" /></span> -->
    </div>
    <div class="tabbar-height"></div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Tab, Tabs, List, PullRefresh, Loading, Button, ActionSheet, Toast, Popup, Icon  } from "vant";
import QRCode from 'qrcode'
import html2canvas from 'html2canvas'
import { myMixins } from "@/assets/js/mixins.js";
import { stringify } from 'qs';
import { mapState } from 'vuex';
import BarNav from "@/components/BarNav"
export default {
  name: "Fans",
  mixins: [myMixins],
  components: {
    [PullRefresh.name]: PullRefresh,
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
    [Button.name]: Button,
    [ActionSheet.name]: ActionSheet,
    [Popup.name]: Popup,
    [Icon.name]: Icon,
    BarNav
  },
  computed: {
    ...mapState(['employee'])
  },
  data() {
    return {
      createLoading:false,
      showImgPop: false,
      posterImg:'',
      code:'',
      showPop: false,
      copyimg: "",
      id: "",
      thisItem: {},
      openid: "",
      fansInfo: {},
      list: [],
      pageNo: 1,
      pageSize:10,
      loadingRefresh: false,
      loading: false,
      finished: false,
      activityList: [],
      activityItem: {},
      staff_id: null,
      userInfo: "",
      merchant_id: null,
    };
  },
  mounted() {
    console.log(this.employee,'employeeemployeeemployee++++++');
    if (process.env.NODE_ENV == "production") {
      //线上环境
      this.openid = localStorage.getItem("OPENID") || "没获取到";
    } else {
      this.openid = this.$store.state.openid || localStorage.getItem("OPENID");
    }
    this.userInfo = this.$store.state.userInfo;
    this.merchant_id = this.$store.state.userInfo.id
    this.getActivityFans();
    this.list = this.$store.state.activityStatus1;
    console.log("list", this.list);
    this.getStaffItemall();
    this.configItemShare();
  },
  methods: {
    // 获取员工id
    getStaffItems(item) {
      // alert(JSON,stringify(item))
      const _this = this;
      let id = item.id;
      let merchant_id = item.merchant_id
      let params = {
        openid: _this.openid,
        merchant_id: merchant_id,
      };
      _this.$request.getStaffItems(params).then((res) => {
        _this.staff_id = res.data.staff_id
        console.log(_this.staff_id, 'this.staff_id');
        let params = {
          id: id,
        };
        _this.$request.getActivityItembase64(params).then((res) => {
          _this.copyimg = res.data;
        });
        _this.showPop = true;
        _this.thisItem = item;
        console.log(_this.thisItem, "thisItem");
        _this.getActivityItem(item);
        _this.$nextTick(function () {
          _this.createQrcode(item);
        });
      });
    },
    // 下拉刷新
    refreshEvent() {
      this.pageNo = 1;
      this.activityList = [];
      this.getStaffItemall();
    },
    getStaffItemall() {
      const _this = this;
	  let openid = ''
	  console.log("this.$router.query.from",this.$route.query.from)
	  if(this.$route.query.from){
		  const employee = this.$store.state.employee
		  console.log('employee',employee)
		  if(employee){
			  openid = employee.openid
		  }else{
			 openid = this.openid 
		  }
	  }else{
		  openid = this.openid
	  }
      let params = {
        openid: openid,
        pageNo: _this.pageNo,
        pageSize: _this.pageSize,
        // status: _this.status
      };
      _this.loading = true;
      _this.loadingRefresh = true;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      this.loading = true;
      this.loadingRefresh = true;
      _this.$request
        .getStaffItemall(params)
        .then((res) => {
          console.log(res.ret, 'res.ret123');
          let data = res.data.data;
          const list = data.map((item) => {
            const leaveTime =
              new Date(item.end_time).getTime() - new Date().getTime();
            const leaveDay = leaveTime / 1000 / 86400;
            item.leaveDay = Math.floor(leaveDay);
            return item;
          });
          console.log(list, "list");
          _this.activityList.push(...list);
          console.log(_this.activityList, "_this.activityList");
          if (_this.pageNo >= Math.ceil(res.data.totalCount / _this.pageSize)) {
            _this.finished = true;
          } else {
            _this.pageNo++;
          }
        })
        .finally(() => {
          console.log("finally");
          this.loadingRefresh = false;
          this.loading = false;
        });
    },
    getActivityFans() {
      let params = {
        openid: this.openid,
      };
      this.$request.getActivityFans(params).then((res) => {
        console.log("res", res);
        this.fansInfo = res.data;
      });
    },
    toApplyListView(item) {
      console.log(item);
      this.$store.commit('setActivityData', item)
      this.$router.push(`myActivity/?merchant_id=${this.merchant_id}&activity_id=${item.id}`)
    },
    getActivityItem(item) {
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      let params = {
        id: item.id,
        openid: _this.openid,
      };
      _this.$request.getActivityItem(params).then((res) => {
        _this.activityItem = res.data;
         console.log(_this.activityItem, "_this.activityItem");
        toast.clear();
      });
    },
    // 分享
    showPopBtn(item) {
      console.log(item.status);
      if(item.status == 2) return this.$toast('本次活动已结束，无法分享')
      this.getStaffItems(item);
      

      // let img = document.getElementById('coverImg');
      // this.ImageToCanvas(img)
      // this.thisItem.cover = this.getBase64Image(img)
      // this.$forceUpdate()
    },
    createPoster() {
      // 生成海报
      const vm = this;
      vm.createLoading = true;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: true,
        logging: true,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        // let url = canvas.toDataURL('image/png')
        // const a = document.createElement('a'); // 创建a标签
        // a.setAttribute('download', `${new Date().getTime()}.png`);// download属性
        // a.setAttribute('href', url);// href链接
        // a.click();// 自执行点击事件
        let url = canvas.toDataURL("image/png");
        vm.createImg = url;
        vm.showImgPop = true;
        vm.createLoading = false;
      });
    },
    createQrcode(item) {
      // alert(this.staff_id)
      // item.href||
      let href = `${location.protocol}//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/plugin/index.html#/caseShow/${
        this.thisItem.model || "applyActivity"
      }/ActivityShow/${this.thisItem.id}?staff_id=${this.staff_id}`;
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
        }
      });
    },
    toShowView(item) {
      const _this = this;
      this.thisItem = item
	  // item.href||
      let href = `${location.protocol}//${location.hostname}${location.href.indexOf('addons')>-1?'/addons/youmi_activitys/public':''}/plugin/index.html#/caseShow/${this.thisItem.model||'applyActivity'}/ActivityShow/${this.thisItem.id}?staff_id=${this.$store.state.staff_id}`;
      window.location.href = href;
    }
  },
};
</script>
